<template>
  <v-app>
    <v-main>
      <v-container py-5>
        <v-layout align-center justify-center py-3>
          <v-flex xs12 sm8 md4>
            <v-card class="px-2 pb-3">
              <v-card-text>
                <v-layout justify-center pt-2>
                  <v-avatar size="40px">
                    <!-- <v-icon dark>user</v-icon> -->
                     <v-icon>fas fa-user</v-icon>
                    <!-- <img src="https://vuetifyjs.com/apple-touch-icon-180x180.png" alt="avatar"> -->
                  </v-avatar>
                </v-layout>
                <v-layout justify-center py-3>
                  <!-- <div class="headline">Sign in</div> -->
                </v-layout>

                <v-form>
                  <v-text-field
                    name="login"
                    label="用户名"
                    type="text"
                    required
                    v-model="username"
                    :rules="usernameRules"
                  ></v-text-field>
                  <v-text-field
                    id="password"
                    name="Password"
                    label="密码"
                    type="password"
                    required
                    v-model="password"
                    :rules="passwordRules"
                  ></v-text-field>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-btn block color="info" @click="submit">登录</v-btn>
              </v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      username: "",
      usernameRules: [
        v => !!v || "请填写用户名"
      ],
      password: "",
      passwordRules: [v => !!v || "请填写密码"]
    };
  },
  methods: {
    submit() {
      console.log(this.username, this.password);
      this.$router.push({ path: '/home' })
    }
  }
};
</script>
